import React, { FC, useEffect } from 'react'
import { Checkbox, Form, Input, Select } from 'antd'
import { QuestionTitlePropsType } from './interface'

const PropComponent: FC<QuestionTitlePropsType> = (props: QuestionTitlePropsType) => {
    const { text, level, isCenter, onChange, disabled } = props
    const [form] = Form.useForm()

    // 表单手动更新事件
    const handleOnValuesChange = () => {
        const newProps = form.getFieldsValue()
        if (onChange) {
            onChange(newProps)
        }
    }

    // 渲染对比：当title更新时，更新form数据
    useEffect(() => {
        form.setFieldsValue({
            text,
            level,
            isCenter,
        })
    }, [text, level, isCenter])

    return (
        <Form
            layout="vertical"
            onValuesChange={handleOnValuesChange}
            initialValues={{ text, level, isCenter }}
            form={form}
            disabled={disabled}
        >
            <Form.Item
                label="标题内容"
                name="text"
                rules={[{ required: true, message: '请输入标题内容' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="文字等级" name="level">
                <Select
                    options={[
                        { value: 1, text: 1 },
                        { value: 2, text: 2 },
                        { value: 3, text: 3 },
                    ]}
                ></Select>
            </Form.Item>
            <Form.Item name="isCenter" valuePropName="checked">
                <Checkbox>居中显示</Checkbox>
            </Form.Item>
        </Form>
    )
}
export default PropComponent
